<template>
  <div>
    <div class="title">
        <div class="split"></div>
        <span>App轮播图</span>
    </div> 
    <el-carousel :interval="4000" type="card" height="350px">
    <el-carousel-item v-for="(item,index) in greenLandLimit" :key="index">
      <el-card :body-style="{ padding: '0px' }">
        <el-image
        class="image"
        :src="item.greenLandPhotos[0].photoUrl"
        fit="contain">
        <div slot="error" >
            <div class="image-slot">
                <i class="el-icon-picture-outline"></i>
                加载失败
            </div>
        </div>
        </el-image>
        <div style="padding: 14px">
          <span v-text="item.name">绿地信息</span>
          <div class="bottom clearfix">
            <time class="time"> 
                上传时间: {{ item.date }}
                绿地面积：{{item.area}}
                绿地等级:{{item.grade}}
            </time>
            <el-button type="text" class="button" @click="toGreenLandDitals(item)">查看详情</el-button>
          </div>
        </div>
      </el-card>
    </el-carousel-item>
  </el-carousel>
  <div>
    <el-row>
    <el-col :span="24" >
        <el-card :body-style="{ padding: '25px' }">
            <el-descriptions title="警报信息总览">
                <el-descriptions-item label="总有用户">
                    <el-tag size="small">{{user.userLength}}位</el-tag></el-descriptions-item>
                <el-descriptions-item label="管理员">
                    <el-tag size="small">{{user.adminLength}}位</el-tag></el-descriptions-item>
                <el-descriptions-item label="警报处理员">
                    <el-tag size="small">{{user.waringLength}}位</el-tag></el-descriptions-item>
                <el-descriptions-item label="信息录入员">
                <el-tag size="small">{{user.insertLength}}位</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="当前登录用户：">{{loginUser.realName}}</el-descriptions-item>
            </el-descriptions>
        </el-card>
    </el-col>
    </el-row>
    <el-row>
    <el-col :span="24" >
        <el-card :body-style="{ padding: '25px' }">
            <el-descriptions title="绿地信息总览">
                <el-descriptions-item label="总有绿地">
                    <el-tag size="small">{{greenLand.greenLandLangth}}个</el-tag></el-descriptions-item>
                <el-descriptions-item label="绿地总面积">
                    <el-tag size="small">{{greenLand.area}}平方米</el-tag></el-descriptions-item>
                <el-descriptions-item label="最近上传绿地时间">
                    <el-tag size="small">{{greenLand.lastTime}}</el-tag></el-descriptions-item>
                <el-descriptions-item label="5级绿地">
                <el-tag size="small">{{greenLand.VgreenLand}}个</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="4级绿地"> <el-tag size="small">{{greenLand.IVgreenLand}}个</el-tag></el-descriptions-item>
                <el-descriptions-item label="3级绿地"><el-tag size="small">{{greenLand.IIIgreenLand}}个</el-tag></el-descriptions-item>
            </el-descriptions>
        </el-card>
    </el-col>
    </el-row>
    <el-row>
    <el-col :span="24" >
        <el-card :body-style="{ padding: '25px' }">
            <el-descriptions title="用户信息总览">
                <el-descriptions-item label="总有用户">
                    <el-tag size="small">{{user.userLength}}位</el-tag></el-descriptions-item>
                <el-descriptions-item label="管理员">
                    <el-tag size="small">{{user.adminLength}}位</el-tag></el-descriptions-item>
                <el-descriptions-item label="警报处理员">
                    <el-tag size="small">{{user.waringLength}}位</el-tag></el-descriptions-item>
                <el-descriptions-item label="信息录入员">
                <el-tag size="small">{{user.insertLength}}位</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="当前登录用户：">{{loginUser.realName}}</el-descriptions-item>
            </el-descriptions>
        </el-card>
    </el-col>
    </el-row>
    
    
  </div>
  </div>
</template>

<script>
import { AxiosGet } from "../../axios";
// import { mapActions } from "vuex";
export default {
  name: "HomeIndex",
  data() {
    return {
          currentDate: new Date(),
          greenLandLimit:[],
          user:{
              adminLength:0,
              userLength:0,
              waringLength:0,
              insertLength:0
          },
          loginUser:[],
          greenLand:{
              greenLandLangth:0,
              area:0,
              lastTime:0,
              VgreenLand:0,
              IVgreenLand:0,
              IIIgreenLand:0,
          }
    };
  },
  computed:{
    // loginUser(){
    //     return "this.loginUser"
    //   },
  },
  mounted() {
      this.getUserNum()
      this.getGreenLand()
      this.editUser()
  },
  methods: {
       editUser(){
            this.$nextTick(()=>{
            this.loginUser = this.$ls.get("loginUser")
        })
      },
      getUserNum(){
          AxiosGet("user/findAll").then(sucess=>{
             this.$store.commit('setUser', sucess.data);
             const user = sucess.data
             this.user.userLength = sucess.data.length
            //  this.user= this.$store.state.user
             user.forEach((item)=>{
                //  console.log(index);
                if(item.role[0].roleName=="admin"){
                    this.user.adminLength +=1
                }if(item.role[0].roleName=="waring"){
                    this.user.waringLength +=1
                }
                if(item.role[0].roleName=="insert"){
                    this.user.insertLength +=1
                }
             })
          })
      },
      getGreenLand(){
        AxiosGet('green/findGreenLandLimit','').then(sucess=>{
                console.log("请求的绿地文件",sucess);
                this.greenLandLimit=sucess.data
            }).catch(error=>{
                console.log(error);

        })
        // greenLandLangth:0,
        //       area:0,
        //       lastTime:0,
        //       VgreenLand:0,
        //       IVgreenLand:0,
        //       IIIgreenLand:0,
        AxiosGet('greenLand/findAll','').then(sucess=>{
            this.$ls.set('greenLandList',sucess.data,30*60*1000)
            let data = sucess.data
            this.greenLand.greenLandLangth = data.length
            this.greenLand.lastTime= data[data.length -1].date
            data.forEach(item=>{
                this.greenLand.area += item.area
                if(item.grade == 5 ){
                    this.greenLand.VgreenLand +=1
                }
                if(item.grade == 4 ){
                    this.greenLand.IVgreenLand +=1
                }
                if(item.grade == 3 ){
                    this.greenLand.IIIgreenLand +=1
                }
            })
            }).catch(error=>{
                console.log(error);

        })
      },
      toGreenLandDitals(greenLand){
          console.log(greenLand);
      }
  },
};
</script>

<style  scoped>
.el-row{
    margin-bottom: 20px;
}
.title {
    margin:20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.split{
    display: inline-block;
    width: 5px;
    height: 15px;
    background-color: rgb(0, 140, 255);
    margin-right: 10px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #fff;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #fff;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
    height: 250px;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>